<html>
<head>
  <title>Skin Standard</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/272632; Windows/6.1.7601 Service Pack 1;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="390"/>

<div>
<div style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;"><b style="font-size: 16px;">等分网格：</b><div>n-col(1-12)<br/><div><img src="img/skinStandard/Image.png" type="image/png" height="258" style="cursor: default;cursor: default;cursor: default;cursor: default;" width="687"/></div><div>写法：</div><div>&lt;div class=&quot;n-row&quot;&gt;</div><div>     &lt;div class=&quot;n-col-2&quot;&gt;</div><div>     &lt;/div&gt;</div><div>     &lt;div class=&quot;n-col-10&quot;&gt;</div><div>          &lt;div class=&quot;n-row&quot;&gt;</div><div>               &lt;div class=&quot;n-col-7&quot;&gt;</div><div>               &lt;/div&gt;</div><div>               &lt;div class=&quot;n-col-5&quot;&gt;</div><div>               &lt;/div&gt;</div><div>          &lt;/div&gt;</div><div>     &lt;/div&gt;</div><div>&lt;/div&gt;</div><div><br/></div><div style="font-size: 16px;"><b>icon字体</b></div><div style="font-size: 16px;">&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt;</div><div style="font-size: 16px;">参见：http://fontawesome.dashgame.com/</div><div><br/></div><div style="font-size: 16px;"><b>标准input select checkbox button</b></div><div>无须特意添加class</div><div><br/></div><div style="font-size: 16px;"><b>标准checkbox</b></div><div style="font-size: 16px;">&lt;div class=&quot;a-checkbox&quot;&gt;</div><div style="font-size: 16px;">     &lt;label&gt;</div><div style="font-size: 16px;">          &lt;input type=&quot;checkbox&quot;&gt;</div><div style="font-size: 16px;">     &lt;/label&gt;<br/>
&lt;/div&gt;</div><div><br/></div><div style="font-size: 16px;"><b>标准button</b></div><div>默认样式：</div><div>&lt;button class=&quot;a-button-default&quot;&gt;登陆&lt;/button&gt;</div><div>蓝色</div><div>&lt;button class=&quot;a-button-blue&quot;&gt;登陆&lt;/button&gt;</div><div>绿色</div><div>&lt;button class=&quot;a-button-green&quot;&gt;登陆&lt;/button&gt;</div><div><br/></div><div style="font-size: 16px;"><b>标准面包屑导航</b></div><div>&lt;div class=&quot;n-row&quot;&gt;<br/>
     &lt;ol class=&quot;a-breadcrumb a-nopadding-left&quot;&gt;<br/>
          &lt;li&gt;&lt;a href=&quot;&quot;&gt;&lt;i class=&quot;fa fa-home&quot;&gt;&lt;/i&gt; 畅言游戏&lt;/a&gt;&lt;/li&gt;<br/>
          &lt;li class=&quot;a-breadcrumb-active&quot;&gt;&lt;a href=&quot;&quot;&gt;查询&lt;/a&gt;&lt;/li&gt;<br/>
     &lt;/ol&gt;<br/>
&lt;/div&gt;</div><div><img src="img/skinStandard/Image [1].png" type="image/png" style="cursor: default;cursor: default;cursor: default;"/></div><div><br/></div><div style="font-size: 16px;"><b>标准panel</b></div><div>&lt;div class=&quot;a-panel a-panel-default&quot;&gt;</div><div>     &lt;div class=&quot;a-panel-head&quot;&gt;</div><div>     &lt;/div&gt;</div><div>     &lt;div class=&quot;a-panel-body&quot;&gt;</div><div>     &lt;/div&gt;</div><div>&lt;/div&gt;</div><div style="font-size: 16px;"><img src="img/skinStandard/Image [2].png" type="image/png" height="145" style="cursor: default;cursor: default;cursor: default;" width="641"/></div><div style="font-size: 16px;">蓝色：.a-panel-blue</div><div style="font-size: 16px;">绿色：.a-panel-green</div><div style="font-size: 16px;"><br/></div><div style="font-size: 16px;"><b>标准边框</b></div><div><table class="a-table a-table-striped" border="1" cellpadding="2" cellspacing="0" width="100%"><tbody><tr><td valign="top">n-border-width-default</td><td valign="top">默认边框宽度</td><td valign="top">1px</td></tr><tr><td valign="top">n-border-width-bold</td><td valign="top">加粗边框</td><td valign="top">2px</td></tr><tr><td valign="top">n-border-color-default</td><td valign="top">默认边框颜色</td><td valign="top">#ccc（灰色）</td></tr><tr><td valign="top">n-border-color-green</td><td valign="top">绿色边框</td><td valign="top"><div>#5eb95e</div></td></tr><tr><td valign="top">n-border-color-blue</td><td valign="top">蓝色边框</td><td valign="top"><div>#0e90d2</div></td></tr><tr><td valign="top">n-border-style-default</td><td valign="top">默认边框类型</td><td valign="top">实线</td></tr><tr><td valign="top">n-border-style-dashed</td><td valign="top">虚线边框</td><td valign="top">dashed</td></tr><tr><td valign="top">n-border-style-dotted</td><td valign="top">点状边框</td><td valign="top"><div>dotted</div></td></tr><tr><td valign="top">n-border-top</td><td valign="top">只上边框</td><td valign="top"><br/></td></tr><tr><td valign="top">n-border-left</td><td valign="top">只左边框</td><td valign="top"><br/></td></tr><tr><td valign="top">n-border-right</td><td valign="top">只右边框</td><td valign="top"><br/></td></tr><tr><td valign="top">n-border-bottom</td><td valign="top">只下边框</td><td valign="top"><br/></td></tr><tr><td valign="top">n-border-top-bottom</td><td valign="top">上下边框</td><td valign="top"><br/></td></tr><tr><td valign="top">n-border-left-right</td><td valign="top">左右边框</td><td valign="top"><br/></td></tr></tbody></table><div style="font-size: 16px;"><br/></div><div style="font-size: 16px;"><b>标准表格</b></div><div>&lt;table id=&quot;example&quot; class=&quot;a-table a-table-striped&quot;&gt;</div><div>     &lt;thead&gt;</div><div>          &lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;</div><div>     &lt;/thead&gt;</div><div>     &lt;tbody&gt;</div><div>          &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;</div><div>     &lt;/tbody&gt;</div><div>     &lt;tfoot&gt;</div><div>          &lt;tr&gt;&lt;th&gt;&lt;/th&gt;&lt;/tr&gt;</div><div>     &lt;/tfoot&gt;</div><div>&lt;/table&gt;<br/><div>如果需要表格插件，参见https://datatables.net/</div></div><div style="font-size: 16px;"><br/></div><div style="font-size: 16px;"><b>标准表单</b></div><div>&lt;form&gt;</div><div>&lt;div class=&quot;a-form&quot;&gt;</div><div>     &lt;label class=&quot;n-col-4&quot;&gt;密&amp;nbsp;&amp;nbsp;码：&lt;/label&gt;</div><div>     &lt;div class=&quot;n-col-8&quot;&gt;</div><div>          &lt;input id=&quot;password&quot; name=&quot;password&quot; type=&quot;password&quot; /&gt;</div><div>     &lt;/div&gt;</div><div>&lt;/div&gt;</div><div>&lt;/form&gt;</div><div><br/></div><div style="font-size: 16px;"><b>标准内边距</b></div><div><table class="a-table a-table-striped" border="1" cellpadding="2" cellspacing="0" width="100%"><tbody><tr><td valign="top">n-padding-default</td><td valign="top">内边距</td><td valign="top">5px</td></tr><tr><td valign="top">n-padding-default-top</td><td valign="top">内顶部边距</td><td valign="top"><div>5px</div></td></tr><tr><td valign="top">n-padding-default-left</td><td valign="top">内左边距</td><td valign="top"><div>5px</div></td></tr><tr><td valign="top">n-padding-default-right</td><td valign="top">内右边距</td><td valign="top"><div>5px</div></td></tr><tr><td valign="top">n-padding-default-bottom</td><td valign="top">内底边距</td><td valign="top"><div>5px</div></td></tr></tbody></table><br/><div style="font-size: 16px;"><b>标准外边距</b></div><div><table class="a-table a-table-striped" border="1" cellpadding="2" cellspacing="0" width="100%"><tbody><tr><td valign="top">n-margin-default</td><td valign="top">内边距</td><td valign="top">10px</td></tr><tr><td valign="top">n-margin-default-top</td><td valign="top">内顶部边距</td><td valign="top"><div>10px</div></td></tr><tr><td valign="top">n-margin-default-left</td><td valign="top">内左边距</td><td valign="top"><div>10px</div></td></tr><tr><td valign="top">n-margin-default-right</td><td valign="top">内右边距</td><td valign="top"><div>10px</div></td></tr><tr><td valign="top">n-margin-default-bottom</td><td valign="top">内底边距</td><td valign="top"><div>10px</div></td></tr></tbody></table><br/></div><div style="font-size: 16px;"><b>清除内边距</b></div><div><table class="a-table a-table-striped" border="1" cellpadding="2" cellspacing="0" width="100%"><tbody><tr><td valign="top">n-nopadding</td><td valign="top">清除边距</td></tr><tr><td valign="top">n-nopadding-left</td><td valign="top">清除左侧边距</td></tr><tr><td valign="top">n-nopadding-right</td><td valign="top">清除右侧边距</td></tr><tr><td valign="top">n-nopadding-top</td><td valign="top">清除顶部边距</td></tr><tr><td valign="top">n-nopadding-bototm</td><td valign="top">清除底部边距</td></tr></tbody></table><div style="font-size: 16px;"><br/></div><div style="font-size: 16px;"><b>清除外边距</b></div></div><div style="font-size: 16px;"><table class="a-table a-table-striped" border="1" cellpadding="2" cellspacing="0" width="100%"><tbody><tr><td valign="top"><font size="3">n-nopadding</font></td><td valign="top"><div><font size="3">清除边距</font></div></td></tr><tr><td valign="top"><div><font size="3">n-nomargin-left</font></div></td><td valign="top"><div><font size="3">清除左侧边距</font></div></td></tr><tr><td valign="top"><div><font size="3">n-nomargin-right</font></div></td><td valign="top"><div><font size="3">清除右侧边距</font></div></td></tr><tr><td valign="top"><font size="3">n-nopadding-top</font></td><td valign="top"><div><font size="3">清除顶部边距</font></div></td></tr><tr><td valign="top"><font size="3">n-nopadding-botot</font></td><td valign="top"><div><font size="3">清除底部边距</font></div></td></tr></tbody></table><div><br/></div><div style="font-size: 16px;"><b>标准Tabs</b></div><div>&lt;div class=&quot;n-row&quot;&gt;<br/>
     &lt;div class=&quot;n-col-8&quot;&gt;<br/>
          &lt;div class=&quot;a-tabs a-tabs-hide&quot;&gt;<br/>
               &lt;ul class=&quot;a-tabs-head&quot;&gt;<br/>
                    &lt;li&gt;&lt;a href=&quot;&quot;&gt;栏目头一一一&lt;/a&gt;&lt;/li&gt;<br/>
                    &lt;li&gt;&lt;a href=&quot;&quot;&gt;栏目头二&lt;/a&gt;&lt;/li&gt;<br/>
                    &lt;li class=&quot;a-tabs-active&quot;&gt;&lt;a href=&quot;&quot;&gt;栏目头三三三三三三三&lt;/a&gt;&lt;/li&gt;<br/>
                    &lt;li&gt;&lt;a href=&quot;&quot;&gt;栏目头四四四四四四四四四&lt;/a&gt;&lt;/li&gt;<br/>
                    &lt;li&gt;&lt;a href=&quot;&quot;&gt;栏目头五&lt;/a&gt;&lt;/li&gt;<br/>
                    &lt;li&gt;&lt;a href=&quot;&quot;&gt;栏目头六&lt;/a&gt;&lt;/li&gt;<br/>
                    &lt;li&gt;&lt;a href=&quot;&quot;&gt;栏目头七&lt;/a&gt;&lt;/li&gt;   <br/>
               &lt;/ul&gt;<br/><br/>
               &lt;div class=&quot;a-tabs-body&quot;&gt;<br/>
                    &lt;div class=&quot;a-tabs-content&quot;&gt;<br/>
                         栏目一内容&lt;br/&gt;<br/>
                         栏目一内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
                    &lt;div class=&quot;a-tabs-content&quot;&gt;<br/>
                         栏目二内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
                    &lt;div class=&quot;a-tabs-content a-tabs-active&quot;&gt;<br/>
                         栏目三内容&lt;br/&gt;<br/>
                         栏目三内容&lt;br/&gt;<br/>
                         栏目三内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
                    &lt;div class=&quot;a-tabs-content&quot;&gt;<br/>
                         栏目四内容&lt;br/&gt;<br/>
                         栏目四内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
                    &lt;div class=&quot;a-tabs-content&quot;&gt;<br/>
                         栏目五内容&lt;br/&gt;<br/>
                         栏目五内容&lt;br/&gt;<br/>
                         栏目五内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
                    &lt;div class=&quot;a-tabs-content&quot;&gt;<br/>
                         栏目六内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
                    &lt;div class=&quot;a-tabs-content&quot;&gt;<br/>
                         栏目七内容&lt;br/&gt;<br/>
                         栏目七内容&lt;br/&gt;<br/>
                         栏目七内容&lt;br/&gt;<br/>
                         栏目七内容&lt;br/&gt;<br/>
                         栏目七内容&lt;br/&gt;<br/>
                    &lt;/div&gt;<br/>
               &lt;/div&gt;<br/>
          &lt;/div&gt;<br/>
     &lt;/div&gt;<br/>
     &lt;div class=&quot;n-col-4&quot;&gt;&lt;/div&gt;<br/>
&lt;/div&gt;</div><div><br/></div><div>如果需要跳转的tab，将a-tabs-hide设为a-tabs-show,然后contents保留一个即可<br/><div style="font-size: medium;"><br/></div><div style="font-size: medium;">效果：</div><div style="font-size: medium;"><img src="img/skinStandard/Image [3].png" type="image/png" height="162" style="cursor: default;cursor: default;cursor: default;" width="489"/></div></div></div></div></div><div style="font-size: 16px;"><b>标准scroll</b></div><div>&lt;div class=&quot;a-scroll-top&quot;&gt;<br/>
     &lt;a href=&quot;&quot;&gt;&lt;i class=&quot;fa fa-angle-up fa-2x&quot;&gt;&lt;/i&gt;&lt;/a&gt;<br/>
     &lt;a href=&quot;&quot;&gt;&lt;i class=&quot;fa fa-angle-down fa-2x&quot;&gt;&lt;/i&gt;&lt;/a&gt;<br/>
&lt;/div&gt;</div><div style="font-size: 16px;"><br/></div><div style="font-size: 16px;"><b>标准页面查询</b></div><div>&lt;input class=&quot;dySearch&quot; sBlock=&quot;dms-site-list table&quot; sDetail=&quot;dms-site-list table tr th&quot;&gt;</div><div><br/></div><div>class：对应需要动态查询的input框</div><div>sBlock：对应动态查询的块级元素</div><div>sDetail：对应块级元素中需要动态查询的具体子元素</div></div>
</div></body></html>